<!--suppress ALL -->
<template>
    <div class="header-body clearfix">
        <div class="header-top">
            <div class="cell ">
                <i class="head-logo"></i>
                <span class="head-text" v-html="title"></span>
            </div>
            <div class="login cell">
                <span v-if="loginInfo.id == 1" class="home" @click="toHome" title="首页"></span>
                <span v-if="loginInfo.id == 1" class="sysalarm " :class="ifUnReview?'ifUnReview':''" @click="()=>{
                    dialogAlarmVisible = !dialogAlarmVisible;
                }" title="系统报警" style="font-size: 24px;">
                    <i class="twinkle"></i>
                </span>
                <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link username">
                        关于
                         {{loginInfo.loginAccount ||'-'}}<i class="el-icon-caret-bottom username-icon ml-5"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <!--<el-dropdown-item command="userinfo">个人信息
                        </el-dropdown-item>
                        <el-dropdown-item command="version" >版本信息
                        </el-dropdown-item>
                        <el-dropdown-item command="pass">修改密码
                        </el-dropdown-item>-->
                        <el-dropdown-item divided command="loginout">安全退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <!--<span class="exit" title="退出" @click="loginOut"></span>-->
            </div>
        </div>
      <Version ref="version"></Version>
      <UserInfo ref="userinfo"></UserInfo>
      <Pwd ref="pwd"></Pwd>
    </div>
</template>

<script>
import Version from '@/common/headecomponents/version.vue';
import UserInfo from '@/common/headecomponents/userinfo.vue';
import Pwd from '@/common/headecomponents/pwd.vue';

export default {
  name: 'Header',
  data() {
    return {
      ifUnReview: false,
      isFixed: false,
    }
  },
  components: {
    Version,
    UserInfo,
    Pwd
  },
  computed: {
    title() {
      return this.$store.getters.getTitle
    },
    loginInfo() {
      return this.$store.getters.getLoginInfo
    }
  },
  methods: {
    version() {
      this.$refs['version'].show();
    },
    userinfo() {
      this.$refs['userinfo'].show();
    },
    pwd() {
      this.$refs['pwd'].show();
    },
    settitle() {
      document.title = this.$store.getters.getTitle
    },
    toHome() {
      this.changeMenuSelect('home')
    },
    changeMenuSelect(index) {
      this.$CuMenu.onSelect(index);
    },
    handleCommand(command) {
      switch (command) {
      case 'loginout':
        this.loginOut();
        break;
      case 'version':
        this.version();
        break;
      case 'userinfo':
        this.userinfo();
        break;
      case 'pass':
        this.pwd();
        break;
      }
    },
    // 退出登录
    loginOut() {
      this.$confirm('确定要退出吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('clearLoginInfo');
        this.$store.dispatch('clearMenu');
        // this.$axiosInstance({
        //   method: 'get',
        //   url: 'logout',
        // }).then(res => {
        this.$router.push({ path: '/login' });
        // }).catch(function(error) {
        //   console.log(error);
        //   this.$router.push({ path: '/login' });
        // })
      }).catch(() => {
      })
    }
  },
  created() {
    this.settitle();
  },
  mounted() {
    this.$nextTick(function() {
      // let LoginUser = JsCookie.getJSON('LoginUser');
      // if (JsCookie.get('message')) {
      //   this.$notify({
      //     type: 'warning',
      //     title: '警告',
      //     message: JsCookie.get('message'),
      //     position: 'top-right',
      //     duration: 5000
      //   });
      //   JsCookie.remove('message');
      // }
      // if (navigator.appName == 'Microsoft Internet Explorer' && navigator.appVersion.split(';')[1].replace(/[ ]/g, '') == 'MSIE9.0') {
      //   function alarm() {
      //
      //     var t = new TWEEN.Tween($('.twinkle')[0].style).to({ backgroundColor: 'rgba(255, 0, 0,0.5)' }, 1000).start();
      //     t.onUpdate(function(d) {
      //       this.backgroundColor = 'rgba(255, 0, 0, ' + d + ')';
      //     });
      //     t.onComplete(function() {
      //       alarm();
      //     });
      //
      //   }
      //
      //   setTimeout(function() {
      //     alarm();
      //   }, 2000)
      // }
    })

  },
}
</script>

<style scoped>
    .header-body {
        height: 100%;
        background-color: #389FC0;
        background: linear-gradient(90deg, #389FC0, #39A1BF);
        background: -ms-linear-gradient(linear, 0% 0%, 100% 0%, from(#389FC0), to(#39A1BF));
        color: white;
        padding: 0;
        border-radius: 0;
        /*-webkit-box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.35);*/
        /*box-shadow: 0px 5px 2px rgba(0, 0, 0, 0.35);*/
        /*z-index: 1000;*/
        position: relative;
    }

    .head-logo {
        width: 40px;
        height: 40px;
        display: inline-block;
        margin: 0 15px 0 5px;
        background: url(~@/assets/img/sp.png) -27px -20px no-repeat;
        vertical-align: middle;
    }

    .head-text {
        font-size: 23px;
        color: #ffffff;
        vertical-align: middle;
        display: inline-block;
        min-width: 40px;
        height: 40px;
        text-align: center;
        padding-left: 6px;
        line-height: 40px;
    }

    .sub-text {
        font-size: 11px;
        vertical-align: middle;
        line-height: 50px;
    }

    .header-top {
        height: 100%;
        display: table;
        width: 100%;
        user-select: none;
    }

    .cell{
        display: table-cell;
        vertical-align: middle;
    }
    .login {
        width: 200px;
        text-align: center;
    }

    .login span {
        display: inline-block;
        position: relative;
        vertical-align: bottom;
        cursor: pointer;
        line-height: 45px;
        min-width: 45px;
        height: 45px;
        text-align: center;
        padding-left: 6px;
        color: #f0f0f0;
    }

    .login .username {
        margin-right: 20px;
    }

    .login span:hover {
        color: #ffff;
    }

    .home {
        background: url(~@/assets/home.png) no-repeat;
        background-size: 50%;
        background-position: 50%;
    }


    .ifUnReview:before {
        content: '';
        background-image: url(~@/assets/d.png);
        background-repeat: no-repeat;
        background-position: 100% 50%;
        background-size: cover;
        position: absolute;
        top: 0px;
        right: 0;
        font-size: 15px;
        text-align: center;
        color: #fff;
        line-height: 3px;
        height: 16px;
        padding: 0px;
        width: 20px;
        border-radius: 50%;
    }

    .twinkle {
        background-image: url(~@/assets/d.png);
        background-repeat: no-repeat;
        background-position: 100% 50%;
        background-size: cover;
        position: absolute;
        top: 0px;
        right: 0;
        font-size: 15px;
        text-align: center;
        color: #fff;
        line-height: 3px;
        height: 16px;
        padding: 0px;
        width: 20px;
        border-radius: 50%;
        background-color: rgba(255, 0, 0, 0)
    }

    .sysalarm {
        position: relative;
        background: url(~@/assets/sysalarm.png) no-repeat;
        background-size: 50%;
        background-position: 50%;
    }

    .exit {
        background: url(~@/assets/exit.png) no-repeat;
        background-size: 50%;
        background-position: 50%;
    }

</style>
<style>

</style>
